<template>
    <div>
      <button ref="printbtn" class="myprintbtn" v-print="'#myprintDom'"></button>
      <div id="myprintDom" class="nocalssvw" style="font-family: SimSun">
        <div class="print-warp" style="page-break-before: always" v-for="(image, index) in list" :key="index">
          <img :src="image.description"/>
        </div>
      </div>
    </div>
  </template>
  <script>
  export default {
    props: {
      list: {
        type: Array,
        default: () => [],
        required: true,
      },
    },
    data() {
      return {
        myPrint: {
          id: "myprintDom",
          extarCss: "",
        },
      };
    },
    methods: {
      print() {
        this.$refs["printbtn"].click();
      },
    },
  };
  </script>
  <style>
  @page {
    size:auto;
    margin:0;
  }
  </style>
  <style scoped lang="scss">
  .myprintbtn {
    display: none;
    font-family: SimSun;
  }
  #myprintDom {
    position: fixed;
    min-width: 645px;
    left: 900000px;
    font-family: SimSun;
  }
  @media print {
    #myprintDom {
      position: static;
    }
  }
  .print-warp {
    margin: 20mm;
  }
  
  .print-warp img{
      width: 100%;
      height: 100%;
  }
  
  </style>